<template>
	<view class="page">
		<navbar title="蜂竞技" :showRank="true" />
		<view class="top-hr"></view>
		<!-- 弹框 -->
		<uv-popup ref="popup" mode="center" custom-style="height: 200rpx;"
			customStyle="background: transparent;width: 80%;">
			<view class="selectModeBox">
				<view style="display: flex;flex-direction: column;" class="selectModeBoxBg">
					<view style="display: flex;
								height: 80px;
								position: relative;
								justify-content: center;
								align-items: center;
								flex-direction: column;">
						<view class="d-title">
							选择模式
						</view>
						<view class="d-title-en">
							Select mode
						</view>
						<view class="closeDialog" @click="fnColse()">
							<image class="img" src="../../static/image/fjj/close.png"></image>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;align-items: center; justify-content: space-around;">
						<view class="dialog-flex-box">
							<view style="display:flex;flex-direction: column;" @click="fnChangeGameMode('offline')">
								<view>
									<image class="mode-img" src="../../static/image/fjj/s-mode.png"></image>
								</view>
								<view class="flex-title">
									| 训练模式 |
								</view>
								<view class="flex-title-en">
									Practice Mode
								</view>
							</view>
						</view>
						<view class="dialog-flex-box">
							<view style="display:flex;flex-direction: column;" @click="fnChangeGameMode('online')">
								<view>
									<image class="mode-img" src="../../static/image/fjj/o-mode.png"></image>
								</view>
								<view class="flex-title">
									| 联机模式 |
								</view>
								<view class="flex-title-en">
									Online Mode
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uv-popup>

		<view class="main" :style="{ height: scrollHeight + 'px'}">
			<view class="operate">
				<!-- 排行按钮 -->
				<!-- <view class="rank-icon" @click="rankClicked">
					<image class="img" src="/static/image/game-icon-rank.png"></image>
				</view> -->
				<!-- 没连蓝牙加class：rank-icon-null，连上蓝牙后去掉 -->
				<!-- <view class="rank-icon rank-icon-null" @click="showBlueTools = true">
					<image class="img" src="/static/image/game-icon3.png"></image>
				</view>
				<view class="rank-icon rank-icon-null" @click="showBlueTools = true">
					<image class="img" src="/static/image/game-icon2.png"></image>
				</view> -->
			</view>
			<view class="level_item level_1">
				<view v-show="true" class="top-notice">
					<image class="avatar" src="../../static/image/fjj/avatar.png"></image>
					<view class="animate__animated animate__bounce"
						style="flex: 1;white-space: nowrap;overflow: hidden;">
						{{notice_list[0].title}}
						<view class="member-en" style="text-align: center;">{{notice_list[0].enTitle}}</view>
					</view>
				</view>
			</view>

			<view class="level_item level_2">｜选择游戏｜
			</view>
			<view class="level_2_en">Select Game</view>
			<view class="level_item level_3" :class="deviceType"
				:style="{ height: level3Height + 'px', width: level3Width + 'px'}">

				<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current"
					:mode="mode" :dots-styles="dotsStyles" field="content">
					<swiper class="swiper-box swiper" @change="change" :current="swiperDotIndex"
						:style="{ height: level3Height + 'px'}">

						<!--pad 第一屏 -->
						<swiper-item
							style="position: absolute;width: 100%;justify-content: center;text-align: center;display: flex;vertical-align: middle;align-items: center;"
							:style="{ height: level3Height + 'px'}">
							<view class="to-right-btn to-right-btn1">
								<image src="../../static/image/to-right.png" mode="widthFix"></image>
							</view>
							<view class="swiper-item uni-bg-red">
								<view class="games_box">
									<view class="game_row1"
										:style="{ height: ((level3Height-30)/2-level3Height/16) + 'px'}">
										<uni-transition v-if="game_object['拼词竞技'] && game_object['拼词竞技'].status==1"
											:duration="100" ref="pcjj" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="pcjjshow">
											<view class="game game1" style="margin-bottom: -15px;"
												@click="fnClickGame('拼词竞技')"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}">
												<image style="width: 100%;height: 100%;"
													src="/static/image/games/pcjj.png" mode="aspectFit">
												</image>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game1" :style="{ width: gameWidth + 'px'}"
												style="overflow: hidden;">
												<view class="game-icon"></view>
												<view class="game-title"></view>
												<view class="game-title-en"></view>
											</view>
										</view>
									</view>

									<!-- :style="{marginTop: '-'+level3MarginTop+'px'}" -->
									<view class="game_row2" :style="{ height: (level3Height-30)/2 + 'px'}">
										<uni-transition v-if="game_object['极速拼词'] && game_object['极速拼词'].status==1"
											:duration="100" ref="jspc" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="jspcshow">
											<view class="game game2" style="overflow: hidden;"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}"
												@click="fnClickGame('极速拼词')">
												<image style="width: 100%;height: 100%;"
													src="/static/image/games/jspc.png" mode="aspectFit"></image>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game2" :style="{ width: gameWidth + 'px'}"
												style="overflow: hidden;">
												<view class="game-icon"></view>
												<view class="game-title"></view>
												<view class="game-title-en"></view>
											</view>
										</view>

										<view style="height:100%;overflow: hidden;" :style="{width: gapWidth + 'px'}">
										</view>

										<uni-transition v-if="game_object['字母接龙'] && game_object['字母接龙'].status==1"
											:duration="100" ref="zmjl" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="zmjlshow">
											<view class="game game3" style="overflow: hidden;"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}"
												@click="fnClickGame('字母接龙')">
												<image style="width: 100%;height: 100%;"
													src="/static/image/games/zmjl.png" mode="aspectFit"></image>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game3" @click="fnClickGame('?')"
												:style="{ width: gameWidth + 'px'}" style="overflow: hidden;">
												<view class="game-icon">
													<image style="width: 75%;" mode="aspectFit"
														src="../../static/image/wenhao.png">
													</image>
												</view>
											</view>
										</view>

									</view>
								</view>
							</view>
						</swiper-item>

						<!--pad 第二屏 -->
						<swiper-item
							style="position: absolute;width: 100%;justify-content: center;text-align: center;display: flex;vertical-align: middle;align-items: center;"
							:style="{ height: level3Height + 'px'}">
							<view class="to-right-btn to-right-btn1">
								<image src="../../static/image/to-right.png" mode="widthFix"></image>
							</view>
							<view class="swiper-item uni-bg-red">
								<view class="games_box">
									<view class="game_row1"
										:style="{ height: ((level3Height-30)/2-level3Height/16) + 'px'}">
										<uni-transition v-if="game_object['词源挑战'] && game_object['词源挑战'].status==1"
											:duration="100" ref="cytz" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="pcjjshow">
											<view class="game game1" style="margin-bottom: -15px;"
												@click="fnClickGame('词源挑战')"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}">
												<image style="width: 100%;height: 100%;"
													src="/static/image/games/cytz.png" mode="aspectFit">
												</image>
												<view v-show="game_object['词源挑战'].test_type" class="tag"
													:class="'tag-' + game_object['词源挑战'].test_type">
													{{game_object['词源挑战'].test_type === 'in' ? '内测' : '公测'}}
												</view>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game1" :style="{ width: gameWidth + 'px'}"
												style="overflow: hidden;">
												<view class="game-icon"></view>
												<view class="game-title"></view>
												<view class="game-title-en"></view>
											</view>
										</view>
									</view>

									<!-- :style="{marginTop: '-'+level3MarginTop+'px'}" -->
									<view class="game_row2" :style="{ height: (level3Height-30)/2 + 'px'}">
										<uni-transition v-if="game_object['线索拼词'] && game_object['线索拼词'].status==1"
											:duration="100" ref="xspc" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="jspcshow">
											<view class="game game2" style="overflow: hidden;"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}"
												@click="fnClickGame('线索拼词')">
												<image style="width: 100%;height: 100%;"
													src="/static/image/games/xspc.png" mode="aspectFit"></image>
												<view v-show="game_object['线索拼词'].test_type" class="tag"
													:class="'tag-' + game_object['线索拼词'].test_type">
													{{game_object['线索拼词'].test_type === 'in' ? '内测' : '公测'}}
												</view>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game2" :style="{ width: gameWidth + 'px'}"
												style="overflow: hidden;">
												<view class="game-icon"></view>
												<view class="game-title"></view>
												<view class="game-title-en"></view>
											</view>
										</view>


										<view style="height:100%;overflow: hidden;" :style="{width: gapWidth + 'px'}">
										</view>

										<uni-transition v-if="game_object['慧眼识词'] && game_object['慧眼识词'].status==1"
											:duration="100" ref="hysc" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="zmjlshow">
											<view class="game game3" style="overflow: hidden;"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}"
												@click="fnClickGame('慧眼识词')">
												<image style="width: 100%;height: 100%;"
													src="/static/image/games/hysc.png" mode="aspectFit"></image>
												<view v-show="game_object['慧眼识词'].test_type" class="tag"
													:class="'tag-' + game_object['慧眼识词'].test_type">
													{{game_object['慧眼识词'].test_type === 'in' ? '内测' : '公测'}}
												</view>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game3" @click="fnClickGame('?')"
												:style="{ width: gameWidth + 'px'}" style="overflow: hidden;">
												<view class="game-icon">
													<image style="width: 75%;" mode="aspectFit"
														src="../../static/image/wenhao.png">
													</image>
												</view>
											</view>
										</view>

									</view>
								</view>
							</view>
						</swiper-item>

						<!--pad 第三屏 -->
						<swiper-item
							style="position: absolute;width: 100%;justify-content: center;text-align: center;display: flex;vertical-align: middle;align-items: center;"
							:style="{ height: level3Height + 'px'}">
							<view class="to-right-btn to-right-btn1">
								<image src="../../static/image/to-right.png" mode="widthFix"></image>
							</view>
							<view class="swiper-item uni-bg-red">
								<view class="games_box">
									<view class="game_row1"
										:style="{ height: ((level3Height-30)/2-level3Height/16) + 'px'}">
										<uni-transition v-if="game_object['九宫格拼词'] && game_object['九宫格拼词'].status==1"
											:duration="100" ref="jggpc" custom-class="transition"
											:mode-class="modeClass" :styles="styles" :show="jggpcshow">
											<view class="game game1" style="margin-bottom: -15px;"
												@click="fnClickGame('九宫格拼词')"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}">
												<image style="width: 100%;height: 100%;"
													src="/static/image/games/jggpc.png" mode="aspectFit">
												</image>
												<view v-show="game_object['九宫格拼词'].test_type" class="tag"
													:class="'tag-' + game_object['九宫格拼词'].test_type">
													{{game_object['九宫格拼词'].test_type === 'in' ? '内测' : '公测'}}
												</view>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game1" :style="{ width: gameWidth + 'px'}"
												style="overflow: hidden;">
												<view class="game-icon"></view>
												<view class="game-title"></view>
												<view class="game-title-en"></view>
											</view>
										</view>
									</view>

									<!-- :style="{marginTop: '-'+level3MarginTop+'px'}" -->
									<view class="game_row2" :style="{ height: (level3Height-30)/2 + 'px'}">
										<uni-transition v-if="game_object['你问我答'] && game_object['你问我答'].status==1"
											:duration="100" ref="nwwd" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="nwwdshow">
											<view class="game game2" style="overflow: hidden;"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}"
												@click="fnClickGame('你问我答')">
												<image style="width: 100%;height: 100%;"
													src="/static/image/games/nwwd.png" mode="aspectFit"></image>
												<view v-show="game_object['你问我答'].test_type" class="tag"
													:class="'tag-' + game_object['你问我答'].test_type">
													{{game_object['你问我答'].test_type === 'in' ? '内测' : '公测'}}
												</view>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game2" :style="{ width: gameWidth + 'px'}"
												style="overflow: hidden;">
												<view class="game-icon"></view>
												<view class="game-title"></view>
												<view class="game-title-en"></view>
											</view>
										</view>

										<view style="height:100%;overflow: hidden;" :style="{width: gapWidth + 'px'}">
										</view>

										<uni-transition
											v-if="false && game_object['xxxxx'] && game_object['xxxxx'].status==1"
											:duration="100" ref="hysc" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="zmjlshow">
											<view class="game game3" style="overflow: hidden;"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}"
												@click="fnClickGame('xxxxx')">
												<image style="width: 100%;height: 100%;"
													src="/static/image/games/hysc.png" mode="aspectFit"></image>
												<view v-show="game_object['xxxxx'].test_type" class="tag"
													:class="'tag-' + game_object['xxxxx'].test_type">
													{{game_object['xxxxx'].test_type === 'in' ? '内测' : '公测'}}
												</view>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game3" @click="fnClickGame('?')"
												:style="{ width: gameWidth + 'px'}" style="overflow: hidden;">
												<view class="game-icon">
													<image style="width: 75%;" mode="aspectFit"
														src="../../static/image/wenhao.png">
													</image>
												</view>
											</view>
										</view>

									</view>
								</view>
							</view>
						</swiper-item>

						<!--pad 汉英游戏 -->
						<swiper-item
							style="position: absolute;width: 100%;justify-content: center;text-align: center;display: flex;vertical-align: middle;align-items: center;"
							:style="{ height: level3Height + 'px'}">
							<view class="swiper-item uni-bg-red">
								<view class="games_box">
									<view class="game_row1"
										:style="{ height: ((level3Height-30)/2-level3Height/16) + 'px'}">
										<uni-transition v-if="game_object['神奇偏旁'] && game_object['神奇偏旁'].status==1"
											:duration="100" ref="sqpp" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="sqppshow">
											<view class="game game1" style="margin-bottom: -15px;"
												@click="fnClickGame('神奇偏旁')"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}">
												<image style="width: 100%;height: 100%;"
													src="/static/image/games/sqpp.png" mode="aspectFit">
												</image>
												<view v-show="game_object['神奇偏旁'].test_type" class="tag"
													:class="'tag-' + game_object['神奇偏旁'].test_type">
													{{game_object['神奇偏旁'].test_type === 'in' ? '内测' : '公测'}}
												</view>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game1" :style="{ width: gameWidth + 'px'}"
												style="overflow: hidden;">
												<view class="game-icon"></view>
												<view class="game-title"></view>
												<view class="game-title-en"></view>
											</view>
										</view>
									</view>

									<!-- :style="{marginTop: '-'+level3MarginTop+'px'}" -->
									<view class="game_row2" :style="{ height: (level3Height-30)/2 + 'px'}">
										<uni-transition v-if="game_object['魔力部首'] && game_object['魔力部首'].status==1"
											:duration="100" ref="mlbs" custom-class="transition" :mode-class="modeClass"
											:styles="styles" :show="mlbsshow">
											<view class="game game2" style="overflow: hidden;"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}"
												@click="fnClickGame('魔力部首')">
												<image style="width: 100%;height: 100%;"
													src="/static/image/games/mlbs.png" mode="aspectFit"></image>
												<view v-show="game_object['魔力部首'].test_type" class="tag"
													:class="'tag-' + game_object['魔力部首'].test_type">
													{{game_object['魔力部首'].test_type === 'in' ? '内测' : '公测'}}
												</view>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game2" :style="{ width: gameWidth + 'px'}"
												style="overflow: hidden;">
												<view class="game-icon"></view>
												<view class="game-title"></view>
												<view class="game-title-en"></view>
											</view>
										</view>


										<view style="height:100%;overflow: hidden;" :style="{width: gapWidth + 'px'}">
										</view>

										<uni-transition v-if="game_object['疯狂同音字'] && game_object['疯狂同音字'].status==1"
											:duration="100" ref="fktyz" custom-class="transition"
											:mode-class="modeClass" :styles="styles" :show="fktyzshow">
											<view class="game game3" style="overflow: hidden;"
												:style="{ width: gameWidth + 'px',height: gameWidth + 'px'}"
												@click="fnClickGame('疯狂同音字')">
												<image style="width: 100%;height: 100%;"
													src="/static/image/games/fktyz.png" mode="aspectFit"></image>
												<view v-show="game_object['疯狂同音字'].test_type" class="tag"
													:class="'tag-' + game_object['疯狂同音字'].test_type">
													{{game_object['疯狂同音字'].test_type === 'in' ? '内测' : '公测'}}
												</view>
											</view>
										</uni-transition>
										<view v-else>
											<view class="game game3" @click="fnClickGame('?')"
												:style="{ width: gameWidth + 'px'}" style="overflow: hidden;">
												<view class="game-icon">
													<image style="width: 75%;" mode="aspectFit"
														src="../../static/image/wenhao.png">
													</image>
												</view>
												<!-- <view class="game-title">随机</view>
												<view class="game-title-en">Random</view> -->
											</view>
										</view>

									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>

			<view class="bottomContent" :style="{width: level3Width + 'px'}">
				<view class="level_item level_4">
					<!-- <uv-checkbox-group v-model="checked" @change="checkFn" customStyle="justify-content: center;">
						<uv-checkbox activeColor="#d7ad56" name="checked" labelColor="#ffffff"
							label="参加晋级SPBCN城市赛排行榜"></uv-checkbox>
					</uv-checkbox-group> -->
				</view>
				<!-- <view class="title-en-common" style="color: #fff;">Join the SPBCN City Championship leaderboard</view> -->
				<view class="level_item level_5 mifeng">
					<mifeng v-if="canvasheight>0" ref="uniWordList2"></mifeng>
				</view>
			</view>
		</view>
		<popPromptBox v-if="showTips" :showClose="true" :msg="msg" align="left" @close="fnColseJoinRankDialog()"
			@confirm="confirmFn"></popPromptBox>

		<!-- 键盘说明 -->
		<popImageBox v-if="imageShow" msg="键盘操作说明" btnTxt="知道了" :showClose="true" @confirm="imageShow=false"
			@close="imageShow = false"></popImageBox>
	</view>
</template>

<script>
	import navbar from '../../components/gamesNav.vue'
	import mifeng from '../../components/games/mifeng.vue'

	export default {
		config: {
			disableScroll: true
		},

		components: {
			navbar,
			mifeng,
		},
		computed: {
			games_length() {
				var that = this;
				return Object.keys(that.game_object).length;
			}
		},
		watch: {
			background_music_url(newVal, oldVal) {
				var that = this;

			},
			// pageType(newVal, oldVal) {
			// 	var that = this;
			// 	// uni.showToast({
			// 	// 	title: '有改变，要播放背景音乐了'
			// 	// })
			// 	if (that.audioContext) {
			// 		if (that.pageType == 'game_menu') {
			// 			that.audioContext.volume = 0.1;
			// 		}
			// 		if (that.pageType == 'game_page') {
			// 			that.audioContext.volume = 0.05;
			// 		}
			// 		if (that.pageType == 'game_rank') {
			// 			that.audioContext.volume = 0.1;
			// 		}
			// 		if (that.pageType == 'game_finish') {
			// 			that.audioContext.volume = 0.1;
			// 		}

			// 		that.audioContext.stop();
			// 		that.audioContext.src = that.$util.getBackgroundMusic(that.pageType);
			// 		that.audioContext.play();
			// 	}
			// }
		},
		data() {
			return {
				imageShow: false,
				canPlayGame: false,
				showAll: true, // 显示全部游戏true 显示上线游戏1
				is_vip: 1,
				join_rank: 1, //1加入排行，0不加入排行
				notice_list: [{
					title: ''
				}],

				// pageType: '',

				background_music_url: '',
				letter_info: {},
				config_info: {},

				show: false,
				aaa: true,


				pcjjshow: true, //拼词竞技
				jspcshow: true, //极速拼词
				zmjlshow: true, //字母接龙
				cytzshow: true, //词源挑战
				xspcshow: true, //线索拼词
				hyscshow: true, //慧眼识词
				jggpcshow: true, //九宫格拼词
				nwwdshow: true, //你问我答
				sqppshow: true, //神奇偏旁
				mlbsshow: true, //魔力部首
				fktyzshow: true, // 疯狂同音字


				modeClass: 'fade',
				styles: {},

				game_list: [],
				game_object: {},
				current_game_info: {
					show: false
				},

				checked: [],
				canvaswidth: 0, //画布宽
				canvasheight: 0, //画布高

				// show: false,
				// title: '标题',
				// content: 'uView的目标是成为uni-app生态最优秀的UI框架',

				word: 'apple',
				scrollHeight: 0,
				level3Height: 0,
				level3Width: 0,
				level3MarginTop: 0,
				deviceType: 'phone',
				gapWidth: 0,
				gameWidth: 0,

				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				dotsStyles: {},
				swiperDotIndex: 0,
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					}
				],
				dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					},
					{
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					{
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
					}
				],
				showTips: false,
				msg: `确认参加SPBCN城市赛前置晋级排行榜?
					参加本排行榜后将会根据您在排行榜的排名获得奖励，最高可以获得参加SPBCN比赛的入围资格。

					注:确认参加将开放晋级排行榜，本赛季内不可退出。`,
			};
		},
		onReady() {
			const that = this
			uni.createSelectorQuery().select('.top-hr').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom;
				that.canvaswidth = uni.getSystemInfoSync().screenWidth - 24;
				that.level3Width = uni.getSystemInfoSync().screenWidth - 24;
				uni.createSelectorQuery().select('.level_2_en').boundingClientRect(rect2 => {
					uni.createSelectorQuery().select('.bottomContent').boundingClientRect(rect5 => {
						that.canvasheight = rect5.height;
						that.level3Height = uni.getSystemInfoSync().windowHeight -
							rect2.bottom - rect5.height;
						// 取最游戏外框最小值
						if (that.level3Width < that.level3Height) {
							that.level3Height = that.level3Width;
						}
						// 获取每个游戏的宽度
						if (that.deviceType == "phone") {
							that.gameWidth = (that.level3Height - 30) / 2;
							that.gapWidth = 0;
						} else {
							that.gameWidth = that.level3Height / 3;
							that.gapWidth = that.gameWidth / 3;
						}
						that.$nextTick(function() {
							that.$forceUpdate();
						})
					}).exec();
				}).exec();
			}).exec();
		},
		onLoad(options) {
			// #ifdef APP-NVUE
			this.styles = {
				justifyContent: 'center',
				alignItems: 'center',
				width: '100px',
				height: '100px',
				borderRadius: '5px',
				textAlign: 'center',
				backgroundColor: '#4cd964',
				boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)',
			}
			// #endif

			var that = this;

			that.fnInit();
			// console.log('game_object', that.game_object)

			uni.getSystemInfo({
				success: function(res) {
					// console.log('平台便利店 ：', res.uniPlatform)
					if (res.uniPlatform != 'web') {
						if (res.platform === 'android') {
							that.imageShow = false;
						} else if (res.platform === 'ios') {
							that.imageShow = true;
						}
					}
				}
			});
			if (uni.getStorageSync('game_object')) {
				that.game_object = uni.getStorageSync('game_object');
			} else {
				that.getGameList();
			}
		},

		beforeDestroy() {
			// 组件即将销毁前执行的操作
			// console.log('组件即将销毁');
			// uni.showToast({
			// 	title: '组件即将销毁'
			// })
			// var that = this;
			// if (that.audioContext) {
			// 	that.audioContext.stop();
			// }
			// 例如，保存数据到本地存储或者取消网络请求等
		},
		onShow() {
			const that = this
			// that.$eventBus.$emit('callMethodIn_background_type', {
			// 	pageType: 'game_menu'
			// })

			console.log('xxx')

			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'menu'
			})

			that.getConfigInfo();
		},
		mounted() {
			const that = this
			// if ('创建一个音频对象') {
			// 	that.audioContext = uni.createInnerAudioContext();
			// 	that.audioContext.src = '';
			// 	that.audioContext.volume = 0.1;
			// 	that.audioContext.loop = true;

			// 	// 监听音频开始播放事件
			// 	that.audioContext.onPlay(() => {
			// 		console.log('音频开始播放');

			// 	});

			// 	// 监听音频播放完毕事件
			// 	that.audioContext.onEnded(() => {
			// 		console.log('音频播放完毕');

			// 	});

			// 	that.pageType = 'game_menu';
			// }


			const systemInfo = uni.getSystemInfoSync();
			const isTablet = /iPad|Nexus|Tablet/i.test(systemInfo.model);
			if (isTablet) {
				// uni.showToast({
				// 	title: '这是平板设备'
				// })
				that.deviceType = "pad";
				uni.setStorageSync('deviceType', "pad");
				// console.log('这是平板设备');
			} else {
				// uni.showToast({
				// 	title: '这是手机设备'
				// })
				that.deviceType = "phone";
				// console.log('这是手机设备');
				uni.setStorageSync('deviceType', "phone");
			}


			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'menu'
			})
		},
		methods: {
			// 获取游戏列表
			getGameList() {
				var that = this;
				that.$http.getGameList({}).then(res => {
					if (res.code === 200) {
						that.game_list = res.data
						// console.log(that.game_list)
						var game_object = {};
						for (var i = 0; i < that.game_list.length; i++) {
							var game_name = that.game_list[i].name;
							game_object[game_name] = that.game_list[i];
						}
						that.game_object = game_object;
						console.log('that.game_object', that.game_object);
						uni.setStorage({
							key: 'game_object',
							data: game_object
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: '',
							duration: 2000
						})
					}
				})
			},
			fnLuyin() {
				// uni.showToast({
				// 	title: '开始录音'
				// })
				// uni.record({
				// 	success: (res) => {
				// 		console.log('录音文件路径: ' + res.tempFilePath);
				// 		console.log('录音时长: ' + res.duration + 'ms');

				// 		// 在这里可以对录音文件进行处理，比如播放、上传等操作
				// 	},
				// 	fail: (err) => {
				// 		console.log('录音失败', err);
				// 	}
				// });
			},
			fnInit() {
				var that = this;
				that.getUserInfo();

			},
			// 排行榜点击事件
			rankClicked() {
				uni.navigateTo({
					url: "/pages/games/rankList"
				})
			},

			// 获取字母信息
			getLetterInfo() {
				var that = this;
				that.$http.getLetterInfo().then(res => {
					if (res.code == 200) {
						that.letter_info = res.data;
						uni.setStorageSync('letter_info', that.letter_info);
					}
				})
			},

			// 获取配置信息
			getConfigInfo() {
				var that = this;
				that.$http.getConfigInfo().then(res => {
					console.log('配置信息!!!!!', res)
					if (res.code === 200) {
						that.config_info = res.data;
						uni.setStorageSync('internet_speed_tip_interval', that.config_info
							.internet_speed_tip_interval);
						uni.setStorageSync('internet_speed_tip_status', that.config_info
							.internet_speed_tip_status);
					} else {
						uni.setStorageSync('internet_speed_tip_interval', 2);
						uni.setStorageSync('internet_speed_tip_status', 1);
					}
				})
			},

			// 获取用户信息
			getUserInfo() {
				var that = this;
				uni.showLoading({
					title: '数据加载中，请稍后',
					mask: true,
				});
				that.$http.getUserInfo().then(res => {
					console.log('!!!!!')
					if (res.code === 200) {
						uni.hideLoading();
						that.join_rank = res.data.join_rank;
						that.is_vip = res.data.is_vip;
						that.canPlayGame = true;

						const title = res.data.vip_expire_time ? '欢迎您尊敬的蜂竞技会员，您的有效期至：' + res.data.vip_expire_time :
							'目前您还不是蜂竞技会员'
						const enTitle = res.data.vip_expire_time ?
							'Welcome esteemed Bee Competition member, your validity period until:' + res.data
							.vip_expire_time :
							'You are not a Bee Competition member'
						that.notice_list = [{
							title,
							enTitle
						}]


						if (that.join_rank == 1) {
							that.checked = ['checked'];
						} else {
							that.checked = [];
						}

						that.getLetterInfo();
					}
				})
			},

			ajax_update_join_rank() {
				var that = this;
				if (that.checked.length == 1) {
					var join_rank = 1;
				} else {
					var join_rank = 0;
				}
				that.$http.updateJoinRank({
					join_rank: join_rank
				}).then(res => {
					if (res.code === 200) {
						// uni.showToast({
						// 	title: '保存成功',
						// 	icon: 'none'
						// })
					}
				})
			},

			fnColse() {
				this.$refs.popup.close();
			},
			// 训练模式选择难度回调
			selectDif(val) {
				console.log('val', val);
			},
			//选择游戏
			fnClickGame(name) {
				var that = this;

				if ('判断网络状态') {
					if (!that.$util.getNetWorkStatus()) {
						return false;
					}
				}

				if (name == '?') {
					var arr = ['拼词竞技', '极速拼词'];
					name = that.$util.getRandomFromArray(arr);
				}

				if (that.is_vip == 0) {
					uni.showToast({
						title: '请激活您的蜂挑战会员',
						icon: 'none'
					})
					return false;
				}
				that.current_game_info = that.game_object[name];
				console.log(that.current_game_info);
				if (that.current_game_info.name == '拼词竞技') {
					that.fnPlayAnimationPCJJ();
					that.$refs.popup.open();
					return false;
				}
				if (that.current_game_info.name == '极速拼词') {
					that.fnPlayAnimationJSPC();
					that.$refs.popup.open();
					return false;
				}
				if (that.current_game_info.name == '字母接龙') {
					that.fnPlayAnimationZMJL();
					// that.$refs.popup.open();
					that.fnChangeGameMode('online')
					return false;
				}
				if (that.current_game_info.name == '词源挑战') {
					that.fnPlayAnimationCYTZ();
					that.$refs.popup.open();
					return false;
				}
				if (that.current_game_info.name == '线索拼词') {
					that.fnPlayAnimationXSPC();
					// 训练模式未完成，暂时隐藏弹窗
					that.$refs.popup.open();
					// that.fnChangeGameMode('online')
					return false;
				}
				if (that.current_game_info.name == '慧眼识词') {
					that.fnPlayAnimationHYSC();
					that.$refs.popup.open();
					return false;
				}
				if (that.current_game_info.name == '九宫格拼词') {
					that.fnPlayAnimationJGGPC();
					that.$refs.popup.open();
					return false;
				}
				if (that.current_game_info.name == '你问我答') {
					that.fnPlayAnimationNWWD();
					that.$refs.popup.open();
					return false;
				}
				if (that.current_game_info.name == '神奇偏旁') {
					that.fnPlayAnimationSQPP();
					that.$refs.popup.open();
					return false;
				}
				if (that.current_game_info.name == '魔力部首') {
					that.fnPlayAnimationMLBS();
					that.$refs.popup.open();
					return false;
				}
				if (that.current_game_info.name == '疯狂同音字') {
					that.fnPlayAnimationFKTYZ();
					that.$refs.popup.open();
					return false;
				}
				uni.showToast({
					title: '暂未开放',
					icon: 'none',
				});

			},

			// 拼词竞技
			fnPlayAnimationPCJJ: function() {
				var that = this;
				that.$refs.pcjj.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.pcjj.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.pcjj.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			fnPlayAnimationJSPC: function() {
				var that = this;
				that.$refs.jspc.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.jspc.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.jspc.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			fnPlayAnimationZMJL: function() {
				var that = this;
				that.$refs.zmjl.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.zmjl.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.zmjl.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			fnPlayAnimationCYTZ: function() {
				var that = this;
				that.$refs.cytz.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.cytz.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.cytz.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			fnPlayAnimationXSPC: function() {
				var that = this;
				that.$refs.xspc.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.xspc.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.xspc.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			fnPlayAnimationHYSC: function() {
				var that = this;
				that.$refs.hysc.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.hysc.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.hysc.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			fnPlayAnimationJGGPC: function() {
				var that = this;
				that.$refs.jggpc.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.jggpc.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.jggpc.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			fnPlayAnimationNWWD: function() {
				var that = this;
				that.$refs.nwwd.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.nwwd.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.nwwd.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},
			fnPlayAnimationSQPP: function() {
				var that = this;
				that.$refs.sqpp.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.sqpp.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.sqpp.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},
			fnPlayAnimationMLBS: function() {
				var that = this;
				that.$refs.mlbs.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.mlbs.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.mlbs.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},
			fnPlayAnimationFKTYZ: function() {
				var that = this;
				that.$refs.fktyz.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 100
				});
				that.$refs.fktyz.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-out',
					duration: 100
				}); // 开始执行动画
				that.$refs.fktyz.run(() => {
					console.log('动画支持完毕')
					that.current_game_info.show = false;
					setTimeout(function() {
						that.current_game_info.show = true;
					})
				});
			},

			change(e) {
				this.current = e.detail.current
			},
			selectStyle(index) {
				this.dotsStyles = this.dotStyle[index]
				this.styleIndex = index
			},
			selectMode(mode, index) {
				this.mode = mode
				this.modeIndex = index
				this.styleIndex = -1
				this.dotsStyles = this.dotStyle[0]
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			onBanner(index) {
				console.log(22222, index);
			},

			fnChangeGameMode(type) {
				var that = this;

				if ('判断网络状态') {
					if (!that.$util.getNetWorkStatus()) {
						return false;
					}
				}

				var game_info = that.current_game_info;

				that.$refs.popup.close();

				if (type == 'online') {
					var game_mode = game_info.name + "|" + '联机模式';
					uni.navigateTo({
						url: '/pages/games/' + game_info.alias + '/game_' + game_info.alias +
							'_find_room?game_mode=' + game_mode +
							'&game_info=' +
							encodeURIComponent(JSON.stringify(game_info)),
						animationType: 'slide-in-bottom', // 右侧滑入效果
						animationDuration: 300 // 动画时长300毫秒
					})
				} else {
					var game_mode = game_info.name + "|" + '训练模式';
					uni.navigateTo({
						url: '/pages/games/' + game_info.alias + '/game_' + game_info.alias +
							'_exercise_room?game_mode=' +
							game_mode +
							'&game_info=' +
							encodeURIComponent(JSON.stringify(game_info)),
						animationType: 'slide-in-bottom', // 右侧滑入效果
						animationDuration: 300 // 动画时长300毫秒
					})
				}
			},
			// 关闭弹框
			close() {
				var that = this;
				that.show = false;
			},

			handleToGame() {
				uni.navigateTo({
					url: '/pages/game_round_1/game'
				})
			},

			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},

			checkFn() {
				var that = this
				// 根据用户状态判断是否可点击
				if (this.join_rank != 1) {
					that.checked = []
					that.showTips = true;
				} else {
					that.checked = ['checked']
				}
			},
			confirmFn() {
				var that = this
				that.checked = ['checked']
				that.ajax_update_join_rank();
				that.showTips = false
				// 调用接口保存
			},
			fnColseJoinRankDialog() {
				var that = this
				that.showTips = false;
				that.ajax_update_join_rank();
			}
		}
	}
</script>

<style lang="less">
	.page {
		background: radial-gradient(circle, #373632, #000);
		width: 100%;
		height: 100vh;
		text-align: center;

	}

	.top-hr {
		width: 100%;
		height: 1px;
	}

	.main {
		width: 100%;
		height: 100vh;
		display: flex;
		position: relative;
		flex-direction: column;
		background-image: url(../../static/image/homePage/diwen.png);
		background-size: 100% auto;
		background-position: top left;
		background-repeat: repeat-y;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;

		.level_item {
			// overflow: hidden;
		}
	}

	.level_1 {
		height: 70px;
		display: flex;
		align-items: center;
		padding-top: 20px;
		border: 1px solid transparent;
	}

	.level_2 {
		height: 20px;
		color: #fff;
		font-family: hzgb;
		font-size: 16px;
		margin-top: 20px;
		border: 1px solid transparent;
	}

	.level_2_en {
		color: #fff;
		font-size: 12px;
		border-bottom: 2px solid #d7ad56;
		width: 100px;
		margin: 0 auto 0px;
		padding-bottom: 2px;
		border: 1px solid transparent;
	}

	.level_3 {
		// flex: 1;
		display: flex;
		align-items: center;
		width: 100%;
		border: 1px solid transparent;
		margin: 0 auto;

		.swiper {
			// border: 1px solid green;
			// height: 600rpx;
		}

		.swiper-item {
			display: block;
			// height: 600rpx;
			text-align: center;
		}
	}

	.games_box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 10px 0px;
		border: 1px solid transparent;

		.game_row1 {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}

		.game_row2 {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}

		.game {
			width: 100%;
			height: 100%;
			color: white;
			// border: 1px solid blue;
			// background-image: url(../../static/image/fengyongyanxuan/6bianBorder.png);
			background-position: center center;
			background-size: contain;
			background-repeat: no-repeat;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.game-icon {
				// margin-top: 40px;
				margin-bottom: 4px;
				width: 88%;

				img {
					width: 75%;
				}
			}
		}
	}

	.bottomContent {
		width: 100%;
		position: absolute;
		bottom: 0;
		display: flex;
		flex-direction: column;
	}

	.level_4 {
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid transparent;
	}

	.title-en-common {
		width: 100%;
		height: 30px;
	}

	.level_5 {
		height: 200px;
		border: 1px solid transparent;
	}

	// --------------

	.selectModeBox {
		background: linear-gradient(to bottom, #373632 0%, #130e00 100%);
		border-radius: 20px;

		.selectModeBoxBg {
			background: url(../../static/image/homePage/diwen.png);
			background-size: cover;
			background-repeat: no-repeat;
			width: 100%;
			height: 100%;
		}
	}

	.closeDialog {
		right: 0px;
		top: 0px;
		position: absolute;
		width: 50px;
		height: 50px;

		.img {
			width: 24px;
			height: 24px;
			margin-top: 20px;
			margin-right: 8px;
		}
	}

	.d-title {
		font-family: hzgb;
		font-size: 16px;
		color: #fff;
		margin-bottom: 8px;
	}

	.d-title-en {
		font-family: hzgb;
		font-size: 10px;
		color: #fff;
	}

	.mode-img {
		width: 100px;
		height: 48px;
		margin-bottom: 4px;
	}

	.flex-title {
		font-family: hzgb;
		font-size: 14px;
		color: #fff;
		margin-bottom: 8px;
	}

	.flex-title-en {
		font-family: hzgb;
		font-size: 10px;
		color: #fff;
	}

	.dialog-flex-box {
		width: 120px;
		height: 120px;
		border: 3px solid #d7ad56;
		border-radius: 16px;
		margin-bottom: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.top-notice {
		width: 100%;
		height: 50px;
		background: linear-gradient(to bottom, #ffd16b, #fff497);
		font-size: 12px;
		font-family: hzgb;
		border-radius: 50px;
		color: #000;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.avatar {
		width: 40px;
		height: 40px;
		margin-left: 4px;
	}

	.game-title {
		color: #fff;
		font-size: 14px;
		font-family: hzgb;
	}

	.game-title-en {
		color: #fff;
		font-size: 10px;
	}

	.operate {
		position: relative;
		width: 100vw;
		top: 10px;

		.rank-icon {
			width: 30px;
			height: 30px;
			position: absolute;
			right: 25px;
			border-radius: 4px;
			background: linear-gradient(to top, #fff497, #ffd16b);
			box-shadow: 0 4px 0 0 #d9b059;
			margin-bottom: 12px;

			.img {
				width: 30px;
				height: 30px;
			}
		}

		.rank-icon-null {
			background: linear-gradient(to top, #cfcfcf, #a1a1a1);
			box-shadow: 0 4px 0 0 #969696;
		}
	}

	.member-en {
		font-family: normal;
		font-size: 10px;
		white-space: break-spaces;
		text-align: left;
		margin-left: 20px;
		line-height: 12px;
	}

	.game {
		position: relative;
	}

	.tag {
		position: absolute;
		bottom: 18px;
		font-size: 10px;
		font-weight: bold;
		padding: 0 6px;
		border-radius: 14px;
	}

	.tag-in {
		background: linear-gradient(to bottom, #ffd16b, #fff497);
		color: #000;
	}

	.tag-out {
		background: linear-gradient(to bottom, #ed0c6c, #b8349a);
		color: #fff;
	}

	.pad {
		.tag {
			bottom: 30px;
			font-size: 14px;
			padding: 0 12px;
		}
	}

	.to-right-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 0;
		z-index: 10000;

		image {
			width: 24px;
		}

		animation: toRight 500ms linear infinite alternate;
	}

	.to-right-btn1 image {
		width: 34px;
	}

	@keyframes toRight {
		from {
			right: 0;
		}

		to {
			right: 5px;
		}
	}
</style>